<template>
  <div class="loop-order">
    <van-tabs @click="onClick" ref="tabs">
      <van-tab v-for="index in Number(loopNum)" :reversed="true" :key="index" :title="'第' + Math.abs(index-1- Number(loopNum)) + '次'">
        <div class="order-list" v-for="item in orderDetail" :key="item.order_id">
          <div class="buyer order-flex">
            <div class="header"><img :src="item.headimgurl"></div>
            <div class="buyer-msg">
              <div class="nickname">{{item.nickname}}</div>
              <div class="order-flex">
                <div>ID：{{item.user_id}}</div>
                <div class="mobile">手机号：{{item.mobile}}</div>
              </div>
            </div>
          </div>
          <div class="buyer buy-order">
            <div class="status">{{item.order_status}}</div>
            <div class="order-no">订单编号：{{item.order_no}}</div>
            <div>下单时间：{{item.create_time}}</div>
            <div class="order-flex order-detail-buy">
              <div class="order-img">
                <img :src="item.img.is_compress === 1 ? item.img.img_path + '180x180':item.img.img_path" alt="">
              </div>
              <div class="order-title">
                <div class="min-title">{{item.item_title}}</div>
                <div class="sub-title" v-if="item.sku_name">{{item.sku_name}}</div>
              </div>
              <div>x{{item.num}}</div>
            </div>
          </div>
          <div class="buyer order-flex buy-reward">
            <div>{{item.account_type_name}}{{item.c_status == 1 ? '' : `(${item.commission_status})`}}</div>
            <template v-if="item.account_type == 3">
              <div class="point-show" :class="item.c_status == 1 ? '' : 'buy-rewards-point'"><span class="money-num">{{parseInt(item.commission)}}</span></div>
            </template>
            <template v-else>
              <div :class="item.c_status == 1 ? '' : 'buy-rewards-money'"><span class="money-num" v-html="scaleGoodsPriceFn(item.commission)"></span></div>
            </template>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import Vue from 'vue'
import { Tab, Tabs } from 'vant'
Vue.use(Tab)
Vue.use(Tabs)
import { scaleGoodsPrice } from '@/utils/index.js'

export default {
  props: {
    loopNum: {
      type: [String, Number],
      default: 1
    },
    orderDetail: {
      type: Array,
      default() {
        return []
      }
    }
  },
  methods: {
    onClick(index) {
      this.$refs.tabs.resize()
      // console.log(index, Number(this.loopNum), Math.abs(index - Number(this.loopNum)))
      this.$emit('loopNum', Math.abs(index - Number(this.loopNum)))
    },
    scaleGoodsPriceFn(price) {
      return scaleGoodsPrice(price)
    }
  }
}
</script>
<style lang="scss">
  .buy-rewards-money{
    .money-num {
      .price-scale {
        font-size: 24px;
        color: #333;
        font-weight: 700;
        .num-font{
          font-size: 32px;
          color: #333;
          font-weight: 700;
        }
      }
    }
  }
</style>
<style lang="scss">
.loop-order {
  margin-top: 24px;

  .van-tab {
    color: #1D2129;
    font-size: 32px;
    // font-weight: 400;
  }
  .van-tab--active {
    color: #FD4149;
  }
  .van-tabs__wrap {
    height: 88px
  }
  .van-tabs__nav {
    padding-bottom: 0;
  }
  .order-flex {
    display: flex;
    align-items: center;
  }
  .order-list {
    padding: 24px;
    background: #fff;
    border-radius: 12px;
    margin: 16px 16px 0 16px;
    .buyer {
      padding-bottom: 24px;
      border-bottom: 1px solid #F2F3F5;
      .header {
        margin-right: 16px;
        img {
          width: 88px;
          height: 88px;
          object-fit: cover;
          border-radius: 88px;
        }
      }
      .buyer-msg {
        font-size: 24px;
        color: #333;
        line-height: 140%;
        .nickname {
          font-size: 28px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          overflow: hidden;
          margin-bottom: 16px;
        }
        .mobile {
          margin-left: 32px;
        }
      }
      &.buy-order {
        padding: 24px 0;
        position: relative;
        font-size: 28px;
        line-height: 140%;
        .order-no {
          margin-bottom: 8px;
        }
        .status {
          position: absolute;
          top: 24px;
          right: 0;
          color: #FD4149;
          width: 30%;
          text-align: right;
        }
        .order-detail-buy {
          margin-top: 24px;
          align-items: self-start;
          .order-img {
            img {
              width: 128px;
              height: 128px;
              border-radius: 8px;
              object-fit: cover;
            }
          }
          .order-title {
            margin-left: 16px;
            margin-right: 32px;
            flex: 1;
            .min-title {
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              overflow: hidden;
            }
            .sub-title {
              color: #999;
              margin-top: 8px;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
              overflow: hidden;
            }
          }
        }
      }
      &.buy-reward {
        padding-top: 24px;
        font-size: 28px;
        line-height: 140%;
        justify-content: space-between;
        border: none;
        padding-bottom: 0;
        .point-show {
          color: #F30C23;
          display: inline-block;
          font-weight: 700;
          font-size: 32px;
          &.buy-rewards-point {
            color: #999
          }
        }
      }
    }
  }
}

</style>